<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">

<head>
	<th:block data-th-replace="/adminlte/base::base-head"></th:block>
	<link rel="stylesheet" href="/kaibes/vditor/index.min.css?v=3.8.4" />
</head>

<body class="hold-transition sidebar-mini layout-fixed">
	<div class="wrapper">
		<th:block data-th-replace="/adminlte/base::base-navbar"></th:block>
		<th:block data-th-replace="/adminlte/base::base-main-sidebar"></th:block>
		<div class="content-wrapper">
			<th:block data-th-replace="/adminlte/base::base-content-header"></th:block>
			<section class="content">
				<div class="container-fluid">
					<div class="row">
						<div class="col-sm-9">
							<div class="form-horizontal">
								<div class="form-group">
									<div class="col-sm-12">
										<input type="text" class="form-control input-lg" name="title"
											placeholder="请输入标题" id="mail-title">
									</div>
								</div>
								<div class="form-group">
									<div class="col-sm-12">
										<div id="vditor"></div>
									</div>
								</div>
							</div>
						</div>
						<div class="col-sm-3">
							<div class="card">
								<div class="card-body ">
									<button type="button" class="btn btn-primary w-100"
										onclick="sendEmail()">发送邮件</button>
								</div>
							</div>
							<div class="card">
								<div class="card-header ">
									<h3 class="card-title">收件人</h3>
								</div>
								<div class="card-body">
									<div class="form-horizontal">
										<div class="form-group">
											<div class="col-sm-12">
												<input type="email" required="required" class="form-control input-lg"
													name="tags" id="mail-receiver">
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="card">
								<div class="card-header ">
									<h3 class="card-title">提示</h3>
								</div>
								<div class="card-body">
									<div>
										<font>1. 使用 </font>
										<font size="5" color="red">$</font>
										<font> 可以联想变量</font>
									</div>
									<div>
										<font>2. 在</font>
										<font size="5" color="red">标题</font>
										<font>上使用变量需要使用</font>
										<font size="5" color="red">th:block</font>
										<font>标签代替font标签</font>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</section>
		</div>
		<div id="variables" style="display: none;" th:text="${variables}"></div>
		<th:block data-th-replace="/adminlte/base::base-footer"></th:block>
		<th:block data-th-replace="/adminlte/base::base-control-sidebar"></th:block>
	</div>
	<script src="/kaibes/vditor/index.min.js?v=3.8.4"></script>
	<script src="mail-vditor.js"></script>
	<script type="text/javascript">
		sendEmail = function () {
			Vditor.md2html(vditor.getValue()).then(data => {
				let mailContext = new Object();
				mailContext.email = $("#mail-receiver").val();
				mailContext.title = $("#mail-title").val();
				mailContext.emailContent = data;

				if (mailContext.email == '') {
					toast.warning("收件人不能为空");
					$("#mail-receiver").focus();
					return;
				}
				if (mailContext.title == '') {
					toast.warning("邮件标题不能为空");
					$("#mail-title").focus();
					return;
				}
				if (mailContext.emailContent == '') {
					toast.warning("邮件内容不能为空");
					return;
				}

				post("/emails/send", mailContext,
					(status, data, headers) => toast.success(getMessage(headers)),
					(status, data, headers) => toast.failure(getMessage(headers))
				);
			});
		}

		var myList = [];
		let variables = $("#variables").text();
		for (var i = 0; i < variables.length; i++) {
			myList[i] = {html: "<a>" + variables[i].name + "</a>", value: '<font color="blue" th:utext="${' + variables[i].value + '}">' + variables[i].name + '</font>'};
		}
		vditor.create('vditor', 1100, 100000, myList);
		window.onload = function () {
			vditor.get.setValue("");
		}
	</script>
</body>

</html>